import React, { PureComponent } from 'react';
import { connect } from 'react-redux'
import PropTypes from 'prop-types'
import { Spin } from 'antd'
import ContentTool from './Content_Tool';
import ContentMain from './Content_Main';
import ContentPreview from './Content_Preview';
import 'antd/lib/spin/style'
import './index.less';

class Main extends PureComponent {

  static propTypes = {
    loading: PropTypes.bool
  }

  state = {
    isCreateFolder: false,
  }

  // 修改创建文件夹的状态
  changeCreateFolderStatus = (flag) => {
    this.setState({
      isCreateFolder: flag
    })
  }

  render () {
    const { isCreateFolder } = this.state
    const { loading } = this.props
    return (
      <>
        <div className="pan_content">
          <ContentTool changeCreateFolderStatus={this.changeCreateFolderStatus}/>
          <div className="pan_content_box">
            <div className="pan_content_warp">
              <ContentPreview />
              <ContentMain changeCreateFolderStatus={this.changeCreateFolderStatus}
                isCreateFolder={isCreateFolder}/>
            </div>
          </div>
        </div>
        <div className="pan_content_loading" style={{ display: loading? 'block': 'none' }}>
          <Spin size="large" className="loading_object"/>
        </div>
      </>
    );
  }
}

export default connect(
  (state) => ({
    loading: state.loading
  }),
  {}
)(Main);
